<template>
    <div class="nav_bar">
        <div class="nav_bar_content">
            <nav>
                <h1>
                    <div>
                        <img src="../../../public/logo.png" alt="">
                        <span>楚才教育集团</span>
                    </div>
                </h1>
                <ul>
                     <li v-for="item in navDataList" :key="item.id">
                        <a href="javascript:;" @click.prevent="showModal">{{ item.title }}</a>
                        <ul>
                            <li v-for="itemT in item.chilider" :key="itemT.id" @click="showModal">{{ itemT.title }}</li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>
<script>
import mockdata from '../../mock/mock'
export default {
    data () {
        return {
            navDataList: mockdata.navData
        }
    },
    created () {
       
    },
    methods: {
        // 启动模态框
        showModal () {
            this.$emit('showModalInGloble',true)
        }
    }
}
</script>
<style lang="less" scoped>
.flex{
    display: flex;
}
.move{
    transition: all 0.6s;
}
.setfontsize(@computed){
    font-size: @computed/@basesize;
}
.setheight(@heigiht){
    height: @heigiht / @basesize;
}
@basesize: 114.3rem;
.nav_bar{
    background-color: #003;
    .nav_bar_content{
        padding: 0 20/@basesize;
        margin: 0 auto;
        text-align: left;
        nav{
            // .flex;
            // line-height: 100/@basesize;
            height: 100/@basesize;
            h1{
                float: left;
                // flex: 1;
                .setfontsize(12);
                img{
                    margin-top: 10/@basesize;
                    width: 60/@basesize;
                }
                div{
                    text-align: center;
                }
                span{
                    text-align: center;
                    display: block;
                    height: 20/@basesize;
                    // margin-top:-80/@basesize;
                }
            }
            >ul{
                // flex: 5;
                height: 100%;
                // .flex;
                float: right;
                >li{
                    // flex: 1;
                    float: left;
                    text-align: center;
                   .setheight(50);
                    line-height: 50/@basesize;
                    text-align: center;
                    >a{
                       .setfontsize(18);
                       width: 100%;
                       padding: 10/@basesize 45/@basesize;
                       font-weight: 400;
                       &:hover{
                           background-color: #3e3d4d;
                           color: red;
                           text-decoration: underline;
                       }
                    }
                    >ul{
                        max-height: 0;
                        overflow: hidden;
                        .move;
                        li{
                            line-height: 50/@basesize;
                            background-color: rgba(31,35,46,.9);
                            .setfontsize(14);
                            text-align: center;
                            cursor: pointer;
                            &:hover{
                                color: red;
                                text-decoration: underline;
                                cursor: pointer;
                            } 
                        }
                    }
                    &:hover{
                        ul{
                            max-height: 500px;
                             .move;
                        }
                    }
                }
            }
        }
    }
}
</style>
